<template>
  <Form :model="form">
    <Row>
      <Col span="4">
        <FormItem label="出院时间">
          <DatePicker
            type="daterange"
            placement="bottom-end"
            placeholder="请选择"
            style="width: 200px"
          />
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="结算时间">
          <DatePicker
            type="daterange"
            placement="bottom-end"
            placeholder="请选择"
            style="width: 200px"
          />
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="机构">
          <Select v-model="model" style="width: 200px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{
              item.label
            }}</Option>
          </Select>
        </FormItem>
      </Col>
      <Col span="4">
        <FormItem label="科室">
          <TreeSelect v-model="value" :data="data" v-width="200" />
        </FormItem>
      </Col>
      <Col span="8">
        <Space>
          <Button type="primary" icon="md-search" @click="goSearch">查询</Button>
          <Button type="dashed" icon="md-refresh" @click="reset">重置</Button>
        </Space>
      </Col>
    </Row>
  </Form>
  <Row gutter="20" align="middle">
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="green">住院患者总数</Tag>
          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <br />
          <Text italic>近30天</Text>&nbsp;
          <Trend flag="up" text-color> 12.5%</Trend>
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="cyan">已提交病案数</Tag>
          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="45"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#13C2C2', '#13C2C2']"
          />
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="blue">已生成清单数</Tag>

          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="45"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#1890FF', '#1890FF']"
          />
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="geekblue">非编码缺陷清单数</Tag>

          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="45"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#2F54EB', '#2F54EB']"
          />
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="purple">编码缺陷清单数</Tag>

          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="45"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#722ED1', '#722ED1']"
          />
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="magenta">已入组清单数</Tag>

          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="80"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#EB2F96', '#EB2F96']"
          />
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="#17B81D">已审核清单数</Tag>

          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="45"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#17B81D', '#17B81D']"
          />
        </div>
      </Card>
    </Col>
    <Col span="3">
      <Card>
        <div style="text-align: center">
          <Tag size="large" color="#D24DC3">已上传清单数</Tag>
          <CountUp :end="1234" :duration="2" ref="count" v-font="24" />
          <Progress
            :percent="45"
            :stroke-width="20"
            status="active"
            text-inside
            :stroke-color="['#D24DC3', '#D24DC3']"
          />
        </div>
      </Card>
    </Col>
  </Row>
  <Row style="padding-top: 30px">
    <Col span="12">
      <div style="width: 100%; height: 350px" id="line1"></div>
    </Col>
    <Col span="12">
      <div style="width: 100%; height: 350px" id="line2"></div>
    </Col>
  </Row>
  <Row style="padding-top: 10px">
    <Col span="12">
      <Divider>
        <Tag size="large" color="purple">编码缺陷分析TOP10</Tag>
      </Divider>
      <Table highlight-row :columns="columns" :data="data"></Table>
    </Col>
    <Col span="12">
      <Divider>
        <Tag size="large" color="geekblue">非编码缺陷分析TOP10</Tag>
      </Divider>
      <Table highlight-row :columns="columns" :data="data"></Table>
    </Col>
  </Row>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'
let form = ref()
let initLine1 = () => {
  var line1 = document.getElementById('line1')
  var lineChart1 = echarts.init(line1)
  var option1 = {
    title: {
      text: '患者总数、已提交病案数、已生成清单数趋势图',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      left: 500,
      data: ['患者总数', '已提交病案数', '已生成清单数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2024-9', '2024-10', '2024-11', '2024-12', '2025-1', '2025-2', '2025-3'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '患者总数',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 120, 132, 101, 200],
      },
      {
        name: '已提交病案数',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 120, 132, 101, 300],
      },
      {
        name: '已生成清单数',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 120, 132, 101, 400],
      },
    ],
  }
  lineChart1.setOption(option1)
}

onMounted(() => {
  initLine1()
})
let initLine2 = () => {
  var line2 = document.getElementById('line2')
  var lineChart2 = echarts.init(line2)
  var option2 = {
    title: {
      text: '已生成清单数、入组清单数、编码缺陷数趋势图',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      left: 500,
      data: ['已生成清单数', '入组清单数', '编码缺陷数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2024-9', '2024-10', '2024-11', '2024-12', '2025-1', '2025-2', '2025-3'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '已生成清单数',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 120, 132, 101, 200],
      },
      {
        name: '入组清单数',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 120, 132, 101, 300],
      },
      {
        name: '编码缺陷数',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 120, 132, 101, 400],
      },
    ],
  }
  lineChart2.setOption(option2)
}

onMounted(() => {
  initLine2()
})

const columns = [
  {
    title: '序号',
    type: 'index',
    align: 'center',
  },
  {
    title: '原因',
    key: 'name',
    align: 'center',
  },
  {
    title: '个数',
    key: 'age',
    align: 'center',
  },
]
const PatientTotal = () => {
  http.post('/Settlement/Statistics/PatientTotal', (response) => {
    console.log(response.data.data, 45456)
  })
}

const goSearch = () => {
  console.log(45456)
  PatientTotal()
}

const reset = () => {}
</script>
